<template>
  <div class="label-type">
    <div class="search-container">
      <div class="search-input" v-role="'A040101002'">
        <el-input
          v-model="model.name"
          placeholder="标注类型"
          :prefix-icon="Search"
          style="width: 272px; margin-right: 24px"
          clearable
        />
        <el-button @click="reset">重置</el-button>
        <el-button @click="search" type="primary">查询</el-button>
      </div>
    </div>
    <div class="content">
      <div class="title-info">
        <div class="title">标注类型列表</div>
        <el-button type="primary" :icon="Plus" @click="create" v-role="'A040101003'">新建</el-button>
      </div>
      <el-table :data="tableList" style="width: 100%" stripe class="define-el-table" v-role="'A040101001'">
        <el-table-column type="index" label="序号" width="240" />
        <el-table-column label="编码">
          <template #default="scope">
            <span>{{ scope.row.value }}</span>
          </template>
        </el-table-column>

        <el-table-column label="名称">
          <template #default="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="类型">
          <template #default="scope">
            <span>{{ scope.row.groupFlag ? "病灶群组" : "单一病灶" }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="320">
          <template #default="scope">
            <el-button @click="edit" v-role="'A040101004'">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div
        class="el-pagination-container"
        style="display: flex; justify-content: flex-end"
      >
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100, 500]"
          layout="prev, pager, next, sizes"
          :total="total"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新建标注类型 -->
    <el-dialog
      v-model="createVisible"
      title="新建标注类型"
      width="780px"
      class="define-el-dialog lesions-el-dialog"
    >
      <div class="content">
        <el-form :model="creatModel" ref="formRef" :rules="rules" label-width="88px">
          <el-form-item label="选择种类" prop="groupFlag">
            <el-radio-group v-model="creatModel.groupFlag">
              <el-radio :label="false">单个病灶</el-radio>
              <el-radio :label="true">病灶群组</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input
                  v-model="creatModel.name"
                  placeholder="请输入"
                  @change="nameChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编码">
                <el-input v-model="creatModel.value" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="lesions-group-container" v-if="creatModel.groupFlag === true">
            <el-row v-for="(subItem, subIndex) in creatModel.childs" :key="subIndex">
              <el-col :span="10">
                <el-form-item
                  :label="'病灶' + (subIndex + 1)"
                  :prop="'childs.' + subIndex + '.name'"
                  :rules="[
                    {
                      required: creatModel.groupFlag,
                      message: '请输入',
                      trigger: ['change'],
                    },
                  ]"
                >
                  <el-input
                    v-model="subItem.name"
                    placeholder="请输入"
                    @change="subNameChange(subItem, subIndex)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="编码">
                  <el-input v-model="subItem.value" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <div class="icon-handle">
                  <div class="plus" @click="plus(subIndex)">
                    <el-icon><Plus /></el-icon>
                  </div>
                  <div class="delete" v-show="subIndex > 0" @click="del(subIndex)">
                    <el-icon><Delete /></el-icon>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm(formRef)"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <!-- <el-dialog
      v-model="updateVisible"
      title="编辑标注类型"
      width="780px"
      class="define-el-dialog lesions-el-dialog"
    >
      <div class="content">
        <el-form :model="updateModel" ref="formRef" :rules="rules" label-width="88px">
          <el-form-item label="选择种类" prop="groupFlag">
            <el-radio-group v-model="creatModel.groupFlag">
              <el-radio :label="false">单个病灶</el-radio>
              <el-radio :label="true">病灶群组</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input
                  v-model="creatModel.name"
                  placeholder="请输入"
                  @change="nameChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编码">
                <el-input v-model="creatModel.value" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="lesions-group-container" v-if="creatModel.groupFlag === true">
            <el-row v-for="(subItem, subIndex) in creatModel.childs" :key="subIndex">
              <el-col :span="10">
                <el-form-item
                  :label="'病灶' + (subIndex + 1)"
                  :prop="'childs.' + subIndex + '.name'"
                  :rules="[
                    {
                      required: creatModel.groupFlag,
                      message: '请输入',
                      trigger: ['change'],
                    },
                  ]"
                >
                  <el-input
                    v-model="subItem.name"
                    placeholder="请输入"
                    @change="subNameChange(subItem, subIndex)"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="编码">
                  <el-input v-model="subItem.value" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <div class="icon-handle">
                  <div class="plus" @click="plus(subIndex)">
                    <el-icon><Plus /></el-icon>
                  </div>
                  <div class="delete" v-show="subIndex > 0" @click="del(subIndex)">
                    <el-icon><Delete /></el-icon>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm(formRef)"> 确认 </el-button>
        </span>
      </template>
    </el-dialog> -->
  </div>
</template>

<script lang="ts" setup>
//@ts-noCheck
import { ref, reactive, onMounted } from "vue";
// import SysNotice from '@/components/sys-notice/index.vue';
import NavBar from "@/components/navbar/index.vue";
import { useAppStore, useUserStore } from "@/store";
import ill from "@/assets/images/ill.png";
import { Warning, Plus, Search, Delete } from "@element-plus/icons-vue";
import { formatDateTime } from "@/utils/date";
import NewTaskList from "@/views/doctor/components/NewTaskList.vue";
import { taskSeriesSearch, userTaskSearch } from "@/api/doctor/doctor";
import {
  TaskSeriesSearchList,
  TaskSeriesSearchModel,
  UserTaskSearchList,
  UserTaskSearchModel,
} from "@/api/doctor/doctor.d";
import {
  lesionSearch,
  lesionMaxCode,
  configLesion,
} from "@/api/configCenter/configCenter";
import type { FormInstance, FormRules } from "element-plus";
import { Message } from "@arco-design/web-vue";

onMounted(() => {
  setTableList();
});

/**
 * 所有任务 搜索
 */
const taskStatusList = reactive([
  { name: "未发布", value: 0 },
  { name: "进行中", value: 1 },
  { name: "已完成", value: 2 },
  { name: "已终结", value: 3 },
]);
const tableList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const model = reactive({
  name: "",
  page: currentPage.value,
  pageSize: pageSize.value,
});

const setTableList = async () => {
  const _model = {
    ...model,
    page: currentPage.value,
    pageSize: pageSize.value,
  };
  const res = await lesionSearch(_model);
  tableList.value = res?.data?.list || [];
  total.value = res?.data?.total || 0;
};

const reset = () => {
  model.name = "";
  setTableList();
};
const search = () => {
  currentPage.value = 1;
  setTableList();
};
/**
 * 分页
 */
const handleSizeChange = (size) => {
  pageSize.value = size;
  setTableList();
};
const handleCurrentChange = (page) => {
  currentPage.value = page;
  setTableList();
};

/**
      新建标注类型
    */
const createVisible = ref(false);
const create = () => {
  createVisible.value = true;
};
const creatModel = reactive({
  groupFlag: "",
  name: "",
  value: "",
  childs: [],
});
const getMaxCodeInfo = async () => {
  const res = await lesionMaxCode();
  const { maxCode } = res?.data;
  const codeArray = maxCode.match(/([a-zA-z]+|\d|_)/g);
  return {
    name: codeArray[0],
    index: codeArray[1] ? Number(codeArray[1]) : 0,
    underline: codeArray[2] || "_",
    subIndex: codeArray[3] ? Number(codeArray[3]) : 0,
  };
};
const nameChange = async () => {
  if (!creatModel.value) {
    const maxCodeInfo = await getMaxCodeInfo();
    creatModel.value = `${maxCodeInfo.name}${maxCodeInfo.index + 1}`;
  }
};

const subNameChange = async (subItem, subIndex) => {
  if (!subItem.value) {
    const maxCodeInfo = await getMaxCodeInfo();
    creatModel.childs[subIndex].value = `${creatModel.value}${maxCodeInfo.underline}${
      subIndex + 1
    }`;
  }
};

const plus = (subIndex) => {
  creatModel.childs.push({ name: "", value: "" });
};
const del = (subIndex) => {
  creatModel.childs.splice(subIndex, 1);
};
const rules = reactive<FormRules>({
  groupFlag: [{ required: true, message: "请选择", trigger: "blur" }],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
});
// const formRef = ref();
const getModel = () => {
  const _model = JSON.parse(JSON.stringify(creatModel));
  if (!_model.groupFlag) {
    delete _model.childs;
  }
  return _model;
};
const formRef = ref<FormInstance>();
const confirm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (!valid) return;
    await configLesion(getModel());
    clear();
    setTableList();
  });
};
const cancel = () => {
  createVisible.value = false;
};
const clear = () => {
  createVisible.value = false;
  creatModel.groupFlag = "";
  creatModel.name = "";
  creatModel.value = "";
  creatModel.childs = [];
};
// 编辑标注
// const updateVisible = ref(false);
// const edit = (id) => {
//   updateVisible.value = true;
// };
// const updateModel = reactive({
//   groupFlag: "",
//   name: "",
//   value: "",
//   childs: [],
// });
// const getMaxCodeInfo = async () => {
//   const res = await lesionMaxCode();
//   const { maxCode } = res?.data;
//   const codeArray = maxCode.match(/([a-zA-z]+|\d|_)/g);
//   return {
//     name: codeArray[0],
//     index: codeArray[1] ? Number(codeArray[1]) : 0,
//     underline: codeArray[2] || "_",
//     subIndex: codeArray[3] ? Number(codeArray[3]) : 0,
//   };
// };
// const nameChange = async () => {
//   if (!updateModel.value) {
//     const maxCodeInfo = await getMaxCodeInfo();
//     updateModel.value = `${maxCodeInfo.name}${maxCodeInfo.index + 1}`;
//   }
// };

// const subNameChange = async (subItem, subIndex) => {
//   if (!subItem.value) {
//     const maxCodeInfo = await getMaxCodeInfo();
//     updateModel.childs[subIndex].value = `${updateModel.value}${maxCodeInfo.underline}${
//       subIndex + 1
//     }`;
//   }
// };

// const plus = (subIndex) => {
//   updateModel.childs.push({ name: "", value: "" });
// };
// const del = (subIndex) => {
//   updateModel.childs.splice(subIndex, 1);
// };
// const rules = reactive<FormRules>({
//   groupFlag: [{ required: true, message: "请选择", trigger: "blur" }],
//   name: [{ required: true, message: "请输入", trigger: "blur" }],
// });
// // const formRef = ref();
// const getModel = () => {
//   const _model = JSON.parse(JSON.stringify(updateModel));
//   if (!_model.groupFlag) {
//     delete _model.childs;
//   }
//   return _model;
// };
// const formRef = ref<FormInstance>();
// const confirm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return;
//   formEl.validate(async (valid) => {
//     if (!valid) return;
//     await configLesion(getModel());
//     clear();
//     setTableList();
//   });
// };
// const cancel = () => {
//   updateVisible.value = false;
// };
// const clear = () => {
//   updateVisible.value = false;
//   updateModel.groupFlag = "";
//   updateModel.name = "";
//   updateModel.value = "";
//   updateModel.childs = [];
// };
</script>

<style lang="less">
.label-type {
  background-color: #f5f5f5;
  padding: 20px;
  .text-info {
    font-size: 16px;
    color: #333;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 20px;
  }
  .search-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px;
    .buttons-container {
      background-color: #fff;
    }
  }
  .content {
    padding: 20px;
    background-color: #fff;
    .title-info {
      display: flex;
      justify-content: space-between;
      .title {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        color: #333333;
        margin-bottom: 20px;
      }
    }

    .el-table {
      margin-top: 10px;
    }
    .el-table thead tr th,
    .el-table tbody tr td {
      text-align: left;
    }
    .el-table thead tr th {
      background-color: #fff;
    }
    .el-table__body tr {
      cursor: pointer;
    }
  }
}

.lesions-el-dialog {
  .el-row {
    margin-bottom: 30px;
  }
  .content {
    padding: 28px 57px 28px 28px;
    .lesions-group-container {
      padding: 0 0 0 24px;

      .icon-handle {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        & > div {
          width: 32px;
          height: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .el-icon {
          color: #448e97;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
